<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/main.css">
</head>
<body>


<section id="top">
    <button type="button" v-on:click="geek">click</button>
    <!--传参数-->
    <button type="button" v-on:click="warn('form cannot be sumitted yet',$event)">上 传</button>

    <div id="example">
        <my-component></my-component>
        <child msg="hello"></child>
    </div>

</section>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>

        var top = new Vue({
            el:'#top',
            data:{

            },
            methods:{
                geek:function (event) {
                    console.log(event);
                },
                warn:function (message,event) {

                    if (event) event.preventDefault();
                    alert(message);
                }
            }
        });



        Vue.component('my-component',{
            template:'<div>A custom component!</div>'
        })

        Vue.component('child',{
            props:['msg'],
            template:'<span>{{msg}}</span>'

        })

        new Vue({
            el:'#example'
        })

</script>

</body>
</html>